import React from 'react';
import { connect } from 'react-redux';
import { Form,Button,Input } from 'antd';
import UsersTransfer from '../../../components/admin/users/UsersTransfer';
import { saveGroup,fetchGroup } from '../../../actions/usersActions';
const FormItem = Form.Item;
var _ = require('lodash');
const formItemLayoutWithOutLabel = {
    wrapperCol: {
        xs: { span: 20, offset: 0 },
        sm: { span: 20, offset: 4 },
    },
};

class AdminGroupForm extends React.Component{
    constructor(props){
        super(props) ;
        this.state = {
            targetKeys:[],
        }
    }
    
    componentWillMount(){
        var { params: { id }} = this.props;
        if ( id ) {
            this.props.fetchGroup(id,true).then(
                (res) => {     
                    const users = this.props.group.users || []; 
                    var targetKeys = [] ;
                    if (!(_.isEmpty(users)) ) {
                        for(let i = 0 ; i < users.length ; i++){
                                    targetKeys.push(users[i].id);
                        }
                    }
                    this.setState({targetKeys});
                     }
            )
        }
    }

    handleSubmit = (e) =>{
         e.preventDefault();
        var { params: { id }} = this.props;
        this.props.form.validateFields((err, values) => {
            id = parseInt(id,10) || 0 ;
            
            let data = {id,name:values.name,users:values.users};
            if (!err) {
                    this.props.saveGroup(data).then(
                        (res) =>{  },
                    )
            }
        });
    }

    render(){
        const { getFieldDecorator } = this.props.form;
        var { params: { id }} = this.props;
        var name = ""; 
        if ( id ) {
            name = this.props.group.name ;
        }
        return (
            <div>
                <Form onSubmit={this.handleSubmit} className="add-itembank-form">
                    <div>  基本信息  </div>
                    <FormItem label="组名" {...formItemLayoutWithOutLabel}>
                    {getFieldDecorator('name', {
                        rules: [{ required: true }],
                        initialValue:name
                    })(
                        <Input />
                    )}
                    </FormItem>
                    <FormItem label="指定用户"> 
                            {getFieldDecorator('users', { 
                                rules: [{ required: true, message: '请指定可访问用户' }],
                                initialValue:this.state.targetKeys
                                })(  
                                    <UsersTransfer values={[]}/> 
                                    )}
                    </FormItem>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        提交
                    </Button>
                </Form>
            </div>
        )
    }
}


const mapStateToProps = (state) => {
  return {
      group: state.user.group
   }
}


AdminGroupForm.propTypes = {
    saveGroup: React.PropTypes.func.isRequired,
    fetchGroup: React.PropTypes.func.isRequired,
};

export default connect(mapStateToProps,{saveGroup,fetchGroup})(Form.create()(AdminGroupForm));